<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>消费信息管理</title>
<link rel="stylesheet" href="<%=request.getContextPath() %>/vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/vendor/kindeditor/themes/default/default.css" />

<script src="<%=request.getContextPath() %>/vendor/jquery.min.js"></script>
<script src="<%=request.getContextPath() %>/vendor/bootstrap/js/bootstrap.js"></script>
<script src="<%=request.getContextPath() %>/vendor/layer-v3.1.1/layer/layer.js"></script>
<script src="<%=request.getContextPath() %>/vendor/nice-validator-1.1.4/dist/jquery.validator.js?local=zh-CN.js"></script>

<script src="<%=request.getContextPath() %>/vendor/kindeditor/kindeditor-all-min.js"></script>
<script src="<%=request.getContextPath() %>/vendor/kindeditor/lang/zh-CN.js"></script>

<style>
		
			.positions {
				margin-top: 20px;
			}
			
			.panel-info > .panel-heading {
			    background-color: #e7e7e7;
			    border-color: #e7e7e7;
			}
			.banner {
				height: 240px;
				overflow: hidden;
			}
			
			.carousel-control.right, .carousel-control.left {
				background-image: none;
			}
			
			.message.col-md-3 {
				padding: 0;
			}
			
			.message .tabul {
				padding-left: 15px;
			}
		</style>

</head>
<body>

	
		<div class="container">
	
			
			<form class="form-inline" action="<%=request.getContextPath()%>/consume/consumeServlet?method=searchConsume" method="POST" style="margin:0 auto ;  margin-top: 50px;">
			  <div class="form-group">
			    <label for="searchPositionName">商品名称：</label>
			    <input type="text" placeholder="请输入商品名" class="form-control" name="search-content" value="${searchContent}">
			  </div>
		
			   <div class="form-group">
			    <label for="searchPositionName">消费类型：</label>
			    
			    <div class="form-group">
		           	 <select class="my-select form-control" name="search-choose" style="height: 34px;">
						<option value="0" >-请选择-</option>
					   	<c:forEach items="${pageModel.classList }" var="typeName" >
					        <option value="${typeName}" <c:if test="${searchChoose == typeName}">selected</c:if>>${typeName}</option>
				        </c:forEach>
				   	 
				   	 </select>
	           </div>
	          
	           
	           
			  </div>
			  
			  <button type="submit" class="btn btn-default">查询</button>
			 
			  <a href="<%=request.getContextPath() %>/consume/consumeServlet?method=showAddConsume" class="btn btn-info">录入消费信息</a>
			  <a href="<%=request.getContextPath() %>/photo.jsp" class="btn btn-info">消费图形报表</a>
			</form>

			<table class="table">
		      <thead>
		        <tr>
		          <th>编号</th>
		          <th>商品名称</th>
		          <th>价格（元）</th>
		          <th>数量</th>
		          <th>总金额</th>
		          <th>消费类型</th>
		          <th>日期</th>
		          <th>操作</th>
		        </tr>
		      </thead>
		      <tbody>
				<c:if test="${empty pageModel.data }">
					<tr>
						<td colspan="8" class="alert alert-warning text-center">暂无信息！</td>
					</tr>
				</c:if>
				<c:if test="${not empty pageModel.data }">
					<c:forEach items="${pageModel.data }" var="consume" varStatus="vs">
				        <tr>
				          <th>${(pageModel.pageNo-1)*10+vs.count }</th>
				          <td>${consume.name }</td>
				          <td>${consume.price }</td>
				          <td>${consume.count }</td>
				          <td>${consume.money }</td>
				          <td>${consume.typeName }</td>
				          <td><fmt:formatDate value="${consume.consumeDate }" pattern="yyyy-MM-dd"/></td>
					      <td>
							<a href="<%=request.getContextPath() %>/consume/consumeServlet?method=updateConsume&consumeId=${consume.id}" class="btn btn-primary">修改</a>
					        <a href="javaScript:deleteConsume(${consume.id});" class="btn btn-danger">删除</a>
						  </td>
				       
				        </tr>
			        </c:forEach>
			    </c:if>
		      </tbody>
		      <tfoot>
		      	<tr>
		      		<td colspan="5" align="center">
						<a href="javascript:go(${pageModel.first })" class="btn btn-default">首页</a>
						<a href="javascript:go(${pageModel.pre })" class="btn btn-default">上一页</a>
						<a href="javascript:go(${pageModel.next })" class="btn btn-default">下一页</a>
						<a href="javascript:go(${pageModel.last })" class="btn btn-default">尾页</a>
						，共${pageModel.totalPage }页，共${pageModel.totalRecords }条记录。
		      		</td>
		      	</tr>
		      </tfoot>
		    </table>
		</div>
		
				
 		<script>
 			function go(pageNo) {
 				$('.form-inline').attr('action', '<%=request.getContextPath()%>/consume/consumeServlet?method=searchConsume&pageNo=' + pageNo + '&pageSize=' + $('#pageSize option:selected').val()).submit();
 			}
 			
 			function setPageSize(obj) {
 				var pageSize = $('#pageSize option:selected').val();
				$('.form-inline').attr('action', '<%=request.getContextPath()%>/consume/consumeServlet?method=searchConsume&pageNo=1&pageSize=' +pageSize).submit();
 			}
 			
 			function deleteConsume(consumeId){
 				layer.confirm('确定删除吗？', {
 					  btn: ['确定','取消'] //按钮
 					}, function(){
 						location='<%=request.getContextPath() %>/consume/consumeServlet?method=deleteConsume&consumeId='+consumeId;
 					});
 			}
 			
 			if('${msg}'=='录入成功!'){
				layer.msg('录入成功!', {icon: 1});
			}
 			if('${msg}'=='删除成功!'){
				layer.msg('删除成功!', {icon: 1});
			}
 			if('${msg}'=='修改成功!'){
				layer.msg('修改成功!', {icon: 1});
			}
 			
 			if('${msg}'=='删除失败!'){
				layer.msg('删除失败!', {icon: 2});
			}
 			
 			
 		</script>
	

</body>
</html>